<template>
  <div>
    <jl-from-button :required="required" :label="label" @click="click" :text="text"/>
    <div class="jl_body">
      <mt-popup style="height: 100%;width: 100%"
                v-model="show"
                :modal="false"
                position="right">
        <jl-header>
          <mt-header :title="title"  :fixed="true">
            <i slot="left">
              <mt-button icon="back" @click="close"></mt-button>
            </i>
          </mt-header>
        </jl-header>
        <jl-content>
          <div class="hide" ref="template">
            <slot></slot>
          </div>
          <template v-for="item in resList">
            <div class="w12" v-html="getHtml(item)" @click="ok(item)"></div>
          </template>
        </jl-content>
      </mt-popup>
    </div>
  </div>
</template>

<script>
  import * as http from '../plugins/http'

  export default {
    name: 'jl-from-query',
    props: {
      title: {type: String},
      label: {type: String},
      required: {type: Boolean},
      type: {
        type: String,
        default: 'select' // query_bean、select、interface、function
      },
      sqlid: {type: String},
      params: {
        type: Object
      },
      text: {type: String},
      function: {
        type: Function
      },
      resultName: {type: String}
    },
    data() {
      return {
        show: false,
        resList: [],
        template: ''
      }
    },
    methods: {
      click() {
        this.show = true
      },
      ok(item) {
        this.$emit('ok', item)
        this.close()
      },
      close() {
        this.show = false
      },
      getHtml(item) {
        let keys = Object.keys(item)
        let template = this.template || ''
        if ($Utils.isNull(this.template)) {
          for (let i = 0; i < keys.length; i++) {
            template += ('<div class="w04">' + item[keys[i]] + '</div>')
          }
        } else {
          for (let i = 0; i < keys.length; i++) {
            template = template.replace('{' + keys[i] + '}', item[keys[i]])
          }
        }
        return template
      },
      getTemplate() {
        this.template = this.$refs.template.innerHTML
      }
    },
    created() {
      let requestType
      switch (this.type) {
        case 'query_bean':
          requestType = () => {
            return new Promise((resolve, reject) => {
              http.query(this.sqlid, this.params || {}).then(v => resolve(v)).catch(e => reject(e))
            })
          }
          break
        case 'select':
          requestType = () => {
            return new Promise((resolve, reject) => {
              http.select({sqlid: this.sqlid, data: this.params || {}}).then(v => resolve(v)).catch(e => reject(e))
            })
          }
          break
        case 'interface':
          requestType = () => {
            return new Promise((resolve, reject) => {
              http.api(this.sqlid, this.params || {}).then(v => resolve(v)).catch(e => reject(e))
            })
          }
          break
        case 'function':
          requestType = () => {
            return new Promise((resolve, reject) => {
              this.function().then(v => resolve(v.data.resultlist)).catch(e => reject(e))
            })
          }
          break
        case 'functionV2':
          requestType = () => {
            return new Promise((resolve, reject) => {
              this.function().then(v => resolve(v)).catch(e => reject(e))
            })
          }
          break
      }
      requestType().then(v => {
        if (!(v instanceof Array)) {
          if (!$Utils.isNull(this.resultName))
            v = v[this.resultName]
        }

        if (this.type == 'query_bean') {
          v.splice(v.length - 1, 1)
        }
        this.resList = v
      })
    },
    mounted() {
      this.getTemplate()
    }
  }
</script>

<style scoped>
</style>
